<template>
    <div>

        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="资料设置" name="first">
                <el-form
                        ref="updateFormRef"
                        :model="updateForm"
                        status-icon
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                >
                    <el-form-item label="头像">
                        <el-upload
                                class="avatar-uploader"
                                action="https://os-s1.ccwtech.net/ck1/client/v1/me/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="updateForm.nickname" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input
                                v-model="updateForm.phone"
                                autocomplete="off"
                                disabled
                        />
                    </el-form-item>
                    <!-- <el-form-item label="真实姓名" prop="fullName">
                        <el-input v-model="updateForm.fullName"/>
                    </el-form-item> -->
                    <el-form-item label="性别">
                        <el-radio-group v-model="updateForm.sex">
                            <el-radio :label="2">男</el-radio>
                            <el-radio :label="1">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="地区" prop="region">
                        <el-input v-model="updateForm.region" disabled/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(updateFormRef)"
                        >确定
                        </el-button
                        >
                        <!--                        <el-button @click="resetForm(updateFormRef)">Reset</el-button>-->
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {reactive, toRefs,ref} from 'vue'
    import {meRenewInfo, userInfo} from "../../api/api";
    import {ElMessage} from "element-plus";

    export default {
        name: "dataSet",
        setup(props,{emit}) {
            let data = reactive({
                activeName: 'first',
                imageUrl:'',
                updateForm: {
                    avatarPic:'',
                    nickname:'',
                    phone:'',
                    // fullName:'',
                    sex:1,
                    region:''
                }
            })


            const updateFormRef = ref(null);

            const handleAvatarSuccess = (
                response,
                uploadFile
            ) => {
                data.imageUrl = URL.createObjectURL(uploadFile.raw)
                console.log('data.imageUrl',response);
                data.updateForm.avatarPic = response
            }

            const beforeAvatarUpload = (rawFile) => {
                if (rawFile.type !== 'image/jpeg') {
                    ElMessage.error('Avatar picture must be JPG format!')
                    return false
                } else if (rawFile.size / 1024 / 1024 > 2) {
                    ElMessage.error('Avatar picture size can not exceed 2MB!')
                    return false
                }
                return true
            }


            let getUserInfo = () =>{
                userInfo().then(res =>{
                    console.log(res.data);
                    data.updateForm.avatarPic = res.data.avatarPic;
                    data.imageUrl = res.data.avatarPic ? res.data.avatarPic +'?' +new Date():'';
                    data.updateForm.nickname = res.data.nickname;
                    data.updateForm.phone = res.data.phone;
                    // data.updateForm.fullName = res.data.fullName;
                    data.updateForm.sex = res.data.sex;
                    data.updateForm.avatarPic = res.data.avatarPic;
                    data.updateForm.region = res.data.region;
                })
            }
            getUserInfo();

            const validateNickName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('昵称不能为空'))
                }else {
                    callback()
                }
            }

            const validatePhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('手机号不能为空'))
                }else {
                    callback()
                }
            }

            // const validateFullName = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('真实姓名不能为空'))
            //     }else {
            //         callback()
            //     }
            // }

            const validateRegion = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('地区不能为空'))
                }else {
                    callback()
                }
            }

            const rules = reactive({
                nickname: [{validator: validateNickName, trigger: 'blur'}],
                phone: [{validator: validatePhone, trigger: 'blur'}],
                // fullName: [{validator: validateFullName, trigger: 'blur'}],
                region: [{validator: validateRegion, trigger: 'blur'}],
            })

            const submitForm = (formEl) => {
                if (!formEl) return
                formEl.validate((valid) => {
                    if (valid) {
                        meRenewInfo(data.updateForm).then(res =>{
                            console.log('修改信息',res)
                            getUserInfo();
                            emit('success');
                            ElMessage({type:'success',message:'修改成功'})
                        }).catch(err =>{
                            ElMessage({type:'errors',message:err.msg})
                        })
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            }

            const resetForm = (formEl) => {
                if (!formEl) return
                formEl.resetFields()
            }
            return {
                handleAvatarSuccess,
                beforeAvatarUpload,
                updateFormRef,
                ...toRefs(data),
                submitForm,
                rules,
                resetForm
            }
        }
    }
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>

<style scoped>
    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
